<template>
  <div class="UserVoice">
    <swiper class="swiper" :options="voiceSwiper">
      <swiper-slide class="user" v-for="(item, index) in list" :key="index">
        <div class="user-info clearfix">
          <div class="user-photo left">
            <img :src="item.image_input" alt="" class="objectCover" />
          </div>
          <div class="user-desc right">
            <h3 class="username">{{ item.title }}</h3>
            <p class="userpost">公司:{{ item.company }}</p>
            <p class="userpost">职位:  {{ item.position }}</p>
          </div>
        </div>
        <div class="user-voice">
          {{ item.synopsis }}
        </div>
      </swiper-slide>
    </swiper>
    <div class="button-con">
      <div class="voice-pagination" slot="pagination"></div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper"
import "swiper/dist/css/swiper.css"
import { getUserVoice } from "@/request/api"

export default {
  name: "UserVoice",
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      list: [],
      voiceSwiper: {
        slidesPerView: 5,
        spaceBetween: 10,
        slidesPerGroup: 3,
        pagination: {
          el: ".voice-pagination",
          clickable: true
        }
      }
    }
  },
  created() {
    this.getVoice();
  },
  mounted() {},
  methods: {
    getVoice() {
      getUserVoice().then((res) => {
        this.list = res.data;
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
  },
};
</script>

<style scoped>
.UserVoice {
  margin: 30px 0 80px;
}

.UserVoice .swiper {
  display: flex;
  color: #666;
}

.UserVoice .user {
  width: 100%;
  height: 230px;
  min-height: 200px;
  background: #fff;
  padding: 30px 14px;
}

.UserVoice .user .user-desc .username {
  font-size: 16px;
}

.UserVoice .user .userpost {
  width: 100%;
  color: #b7b7b7;
  margin-top: 3px;
  font-size: 12px;
}

.user-photo {
  width: 90px;
  height: 76px;
  border-radius: 10px;
  overflow: hidden;
}

.user-desc {
  display: flex;
  width: calc(100% - 90px);
  padding-left: 10px;
  align-content: center;
  flex-wrap: wrap;
}

.user-voice {
  margin-top: 14px;
  line-height: 1.8;
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.button-con {
  position: relative;
  margin-top: 45px;
}

.swiper-container-multirow-column > .swiper-wrapper {
  flex-direction: row !important;
}

.voice-pagination {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.voice-pagination /deep/ .swiper-pagination-bullet {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 16px;
  background: #ccc;
  opacity: 1;
  outline: none;
}

.voice-pagination /deep/ .swiper-pagination-bullet-active {
  background: rgba(228, 139, 44, 0.9);
  box-shadow: 0 0 10px rgba(228, 139, 44, 0.9);
}

@media only screen and (max-width: 1200px) {
  .UserVoice {
    margin: 30px 0 50px;
  }
}
</style>
